<template>
	<div class="components-container">
		<p class="warn-content">
			<a href="https://github.com/PanJiaChen/vue-countTo" target="_blank"
			>countTo-component</a
			>
		</p>
		<count-to
				:autoplay="false"
				:decimals="_decimals"
				:duration="_duration"
				:end-val="_endVal"
				:prefix="_prefix"
				:separator="_separator"
				:start-val="_startVal"
				:suffix="_suffix"
				class="example"
				ref="example"
		/>
		<div style="margin-left: 25%; margin-top: 40px">
			<label class="label" for="startValInput"
			>startVal:
				<input
						name="startValInput"
						type="number"
						v-model.number="setStartVal"
				/>
			</label>
			<label class="label" for="endValInput"
			>endVal:
				<input
						name="endVaInput"
						type="number"
						v-model.number="setEndVal"
				/>
			</label>
			<label class="label" for="durationInput"
			>duration:
				<input
						name="durationInput"
						type="number"
						v-model.number="setDuration"
				/>
			</label>
			<div @click="start" class="startBtn example-btn">开始</div>
			<div @click="pauseResume" class="pause-resume-btn example-btn">
				暂停/恢复
			</div>
			<br/>
			<label class="label" for="decimalsInput"
			>decimals:
				<input
						name="decimalsInput"
						type="number"
						v-model.number="setDecimals"
				/>
			</label>
			<label class="label" for="separatorInput"
			>separator:
				<input name="separatorInput" v-model="setSeparator"/>
			</label>
			<label class="label" for="prefixInput"
			>prefix:
				<input name="prefixInput" v-model="setPrefix"/>
			</label>
			<label class="label" for="suffixInput"
			>suffix:
				<input name="suffixInput" v-model="setSuffix"/>
			</label>
		</div>
		<code
		>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27;
		 :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{
		 _duration
		 }}&#x27; :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{
		 _separator
		 }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{
		 _suffix
		 }}&#x27; :autoplay=false&gt;</code
		>
	</div>
</template>

<script>
	import countTo from 'vue-count-to';

	export default {
		name: 'CountToDemo',
		components: {countTo},
		data() {
			return {
				setStartVal: 0,
				setEndVal: 2017,
				setDuration: 4000,
				setDecimals: 0,
				setSeparator: ',',
				setSuffix: ' rmb',
				setPrefix: '¥ ',
			};
		},
		computed: {
			_startVal() {
				if (this.setStartVal) {
					return this.setStartVal;
				} else {
					return 0;
				}
			},
			_endVal() {
				if (this.setEndVal) {
					return this.setEndVal;
				} else {
					return 0;
				}
			},
			_duration() {
				if (this.setDuration) {
					return this.setDuration;
				} else {
					return 100;
				}
			},
			_decimals() {
				if (this.setDecimals) {
					if (this.setDecimals < 0 || this.setDecimals > 20) {
						alert('digits argument must be between 0 and 20');
						return 0;
					}
					return this.setDecimals;
				} else {
					return 0;
				}
			},
			_separator() {
				return this.setSeparator;
			},
			_suffix() {
				return this.setSuffix;
			},
			_prefix() {
				return this.setPrefix;
			},
		},
		methods: {
			start() {
				this.$refs.example.start();
			},
			pauseResume() {
				this.$refs.example.pauseResume();
			},
		},
	};
</script>

<style scoped>
	.example-btn {
		display: inline-block;
		margin-bottom: 0;
		font-weight: 500;
		text-align: center;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		background-image: none;
		border: 1px solid transparent;
		white-space: nowrap;
		line-height: 1.5;
		padding: 4px 15px;
		font-size: 12px;
		border-radius: 4px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		position: relative;
		color: rgba(0, 0, 0, 0.65);
		background-color: #fff;
		border-color: #d9d9d9;
	}

	.example-btn:hover {
		color: #4ab7bd;
		background-color: #fff;
		border-color: #4ab7bd;
	}

	.example {
		font-size: 50px;
		color: #f6416c;
		display: block;
		margin: 10px 0;
		text-align: center;
		font-size: 80px;
		font-weight: 500;
	}

	.label {
		color: #2f4f4f;
		font-size: 16px;
		display: inline-block;
		margin: 15px 30px 15px 0;
	}

	input {
		position: relative;
		display: inline-block;
		padding: 4px 7px;
		width: 70px;
		height: 28px;
		cursor: text;
		font-size: 12px;
		line-height: 1.5;
		color: rgba(0, 0, 0, 0.65);
		background-color: #fff;
		background-image: none;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	.startBtn {
		margin-left: 20px;
		font-size: 20px;
		color: #30b08f;
		background-color: #fff;
	}

	.startBtn:hover {
		background-color: #30b08f;
		color: #fff;
		border-color: #30b08f;
	}

	.pause-resume-btn {
		font-size: 20px;
		color: #e65d6e;
		background-color: #fff;
	}

	.pause-resume-btn:hover {
		background-color: #e65d6e;
		color: #fff;
		border-color: #e65d6e;
	}
</style>

